<template>
    <div>
        <nut-navbar title="库存管理" />
        {{ state.id }}
        <nut-table :columns="state.columns" :data="state.data"></nut-table>
        <CargoInfo v-model:visible="state.cargoPopupVisible" />
    </div>
</template>

<script lang="ts">
export default { name: '' }
</script>

<script lang="ts" setup>
import { reactive, ref, nextTick, onMounted, useAttrs, useSlots, h } from 'vue'
import { Button } from '@nutui/nutui-taro'
import CargoInfo from 'src/components/CargoInfo.vue'
import Taro from '@tarojs/taro'
import { $http } from '@/request'

// const slots = useSlots()

// const attrs = useAttrs()

// const emits = defineEmits()

// interface Row {

// }

const state = reactive({
    cargoPopupVisible: false,
    columns: [
        {
            title: '尺寸(长x宽) & 颜色',
            key: 'info',
            align: 'center',
            render: (row) => {
                return h('div', {
                    style: {
                        display: 'inline-block',
                        width: '100%',
                        height: '100%'
                    },
                    onClick: openDetailPopup
                }, [
                    row.size,
                    h('div', {
                        style: {
                            display: 'inline-block',
                            marginLeft: '10px',
                            width: '30px',
                            height: '20px',
                            backgroundColor: 'green',
                            verticalAlign: 'text-bottom'
                        }
                    })
                ])
            }
        },
        {
            title: '当前库存',
            key: 'inventory',
            align: 'center',
            render: (row) => {
                return h('span',
                    {
                        style: {
                            color: !row.inventory && 'red'
                        },
                        onClick: openDetailPopup
                    },
                    row.inventory
                )
            }
        },
        {
            title: '操作',
            key: 'operate',
            align: 'center',
            stylecolumn: 'width: 110px',
            render: (row) => {
                return h('div', {
                    style: {
                        display: 'flex',
                        justifyContent: 'space-between'
                    }
                }, [
                    h(
                        Button,
                        {
                            type: row.inventory ? 'danger' : 'default',
                            size: 'small',
                            disabled: !row.inventory,
                            onClick: () => {

                            }
                        },
                        '出库'
                    ),
                    h(
                        Button,
                        {
                            onClick: () => {

                            },
                            type: 'success',
                            size: 'small'
                        },
                        '入库'
                    )
                ])
            }
        }
    ],
    data: [
        {
            size: '70x100',
            color: '绿色',
            inventory: 100
        },
        {
            size: '80x100',
            color: '绿色',
            inventory: 0
        }
    ]
})

// console.clear()

const openDetailPopup = (row) => {
    state.cargoPopupVisible = true
}

onMounted(() => {
    // console.log(Taro.getCurrentInstance()?.router?.params)
})

// defineExpose({

// })
</script>

<style lang="scss" scoped></style>
